<template>
	<view class="body">
		<view class="wrap">
			<view class="content">
				<u-form :model="form" ref="uForm">
					<view class="title">BOSS直拒登录</view>
					<u-form-item prop="username" class="input">
						<u-input v-model="form.username" type="text" placeholder="请输入用户名" />
					</u-form-item>
					<u-form-item prop="password" class="input">
						<u-input v-model="form.password" type="password" placeholder="请输入密码" />
					</u-form-item>
					<u-form-item prop="captcha">
						<uni-captcha :scene="form.scene" v-model="form.captcha"></uni-captcha>
					</u-form-item>
					<button @tap="login" :style="[inputStyle]" class="login-btn">登录</button>
					<view class="register-text" @tap="toRegister">还没有账号，立即注册</view>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/common/config.js'
	export default {
		data() {
			return {
				form: {
					username: '',
					password: '',
					scene: 'login',
					captcha: ''
				}
			}
		},
		onLoad() {

		},
		computed: {
			inputStyle() {
				let style = {
					color: "#fff",
					backgroundColor: this.$u.color['warning']
				};
				if (this.form.username && this.form.password) {
					style.backgroundColor = "#00b4b3";
				}
				return style;
			}
		},
		methods: {
			login() {
				if (!this.form.username) {
					this.$u.toast('请输入用户名')
					return
				}

				if (!this.form.password) {
					this.$u.toast('请输入密码')
					return
				}
				this.$u.toast('登录中...')
				uni.request({
					url: config.url + 'user/login',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'xmlhttprequest'
					},
					data: {
						username: this.form.username,
						password: this.form.password
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 0) {
							uni.showToast({
								title: "登录成功",
								duration: 1000
							});
							this.$store.state.chat_cover=res.data.data.cover
							this.$store.state.user._id = res.data.data.id
							this.$store.state.user.username = res.data.data.username
							this.$store.state.user.cover = res.data.data.cover
							this.$store.state.user.sex = res.data.data.sex
							this.$store.state.user.age = res.data.data.age
							this.$store.state.user.edu = res.data.data.edu
							this.$store.state.user.school = res.data.data.school
							console.log("this.$store.state.user")
							console.log(this.$store.state.user)
							this.$store.state.isLogin = true;
							uni.setStorageSync("isLogin",true);
							uni.setStorageSync("user",this.$store.state.user);
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1000)

						} else {
							setTimeout(() => {
								this.$u.toast(res.data.msg)
							}, 500)

						}
					}
				})
			},
			// async login() {
			// 	if (!this.form.username) {
			// 		this.$u.toast('请输入用户名')
			// 		return
			// 	}

			// 	if (!this.form.password) {
			// 		this.$u.toast('请输入密码')
			// 		return
			// 	}
			// 	this.$u.toast('登录中...')
			// 	let res = await uniCloud.callFunction({
			// 		name: 'uni-id-cf',
			// 		data: {
			// 			action: 'login',
			// 			params: this.form,
			// 		}
			// 	})
			// 	if (res.result.code === 0) {
			// 		this.$u.toast('登陆成功');

			// 		// uniCloud云函数
			// 		this.$api.get_user({
			// 			name: 'get_user'
			// 		}).then((res) => {
			// 			console.log(res.data)
			// 			console.log(this.form.username)
			// 			for (let i = 0; i < res.data.length; i++) {
			// 				if (res.data[i].username == this.form.username) {
			// 					this.$store.state.user._id = res.data[i]._id
			// 					this.$store.state.user.username = res.data[i].username
			// 					if (res.data[i].cover) {
			// 						this.$store.state.user.cover = res.data[i].cover
			// 					}
			// 					if (res.data[i].sex) {
			// 						this.$store.state.user.sex = res.data[i].sex
			// 					}
			// 					if (res.data[i].age) {
			// 						this.$store.state.user.age = res.data[i].age
			// 					}
			// 					if (res.data[i].edu) {
			// 						this.$store.state.user.edu = res.data[i].edu
			// 					}
			// 					if (res.data[i].school) {
			// 						this.$store.state.user.school = res.data[i].school
			// 					}
			// 					console.log("this.$store.state.user")
			// 					console.log(this.$store.state.user)
			// 					this.$store.state.isLogin = true;
			// 					break;
			// 				}
			// 			}

			// 		})

			// 		this.$api.update_user({
			// 			name: 'update_user',
			// 			id: this.$store.state.user._id,
			// 			cover: this.$store.state.user.cover,
			// 			sex: this.$store.state.user.sex,
			// 			age: this.$store.state.user.age,
			// 			edu: this.$store.state.user.edu,
			// 			school: this.$store.state.user.school
			// 		}).then((res) => {
			// 			console.log(res)
			// 			uni.showToast({
			// 				title: '登录成功',
			// 				icon: 'none'
			// 			});
			// 			uni.switchTab({
			// 				url: '/pages/index/index'
			// 			})
			// 		})
			// 		// this.$u.route('/pages/index/index');

			// 	} else if (res.result.code === 10002) {
			// 		this.$u.toast(res.result.msg)
			// 	} else {
			// 		console.log(res)
			// 		// this.$u.toast(res.result.msg);
			// 		this.$u.toast("登录失败！！");
			// 	}
			// },

			toRegister() {
				this.$u.route('/pages/register/register');
			}
		}
	};
</script>

<style lang="scss">
	.body {
		background: $boss-base-color;
		width: 100vw;
		height: 100vh;
		padding-top: 140rpx;
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
				background-size: 600% 600%;
				animation: gradientBG 5s ease infinite;
		.wrap {
			font-size: 28rpx;

			.content {
				background: white;
				width: 60%;
				padding: 40rpx;
				margin: 80rpx auto 0;
				border-radius: 40rpx;
				-webkit-animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
					        animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
				.title {
					text-align: left;
					font-size: 60rpx;
					font-weight: 500;
					text-align: center;
					margin-bottom: 100rpx;
				}

				.input {
					text-align: left;
					margin-bottom: 10rpx;
					padding-bottom: 6rpx;
					border: 1px solid gray;
					border-radius: 20rpx;
					margin-bottom: 40rpx;
				}

				.login-btn {
					margin-top: 40rpx;
					background-color: rgb(253, 243, 208);
					color: #FFFFFF;
					border: none;
					font-size: 30rpx;
					padding: 12rpx 0;

					&::after {
						border: none;
					}
				}

				.register-text {
					padding: 20rpx 0;
					text-align: right;
					color: $boss-base-color;
				}
			}
		}
	}
</style>